import React from 'react';
import { View, Text, TouchableOpacity } from "react-native";
import THNav from "../../../components/THNav";
import { ListItem } from "react-native-elements";
import { inject, observer } from 'mobx-react';
import { pxToDp } from '../../../utils/stylesKits';
import { ActionSheet } from "teaset";
import AsyncStorage from '@react-native-community/async-storage';
import JMessage from "../../../utils/JMessage";
import Toast from '../../../utils/Toast';

@inject('RootStore')
@inject('UserStore')
@observer

class Index extends React.Component {

    // 退出登录
    logout = async () => {
        // 弹出询问框 是否退出
        // 确定 清除本地的缓存数据 mobx user  mobx token
        // 极光执行 退出
        // 提示用户 退出成功
        // 重新跳转到登录页面

        const tmplpgout = async () => {
            // 清除缓存
            await AsyncStorage.removeItem('userinfo')
            // 清除用户数据
            this.props.UserStore.clearUser();
            // 清除token
            this.props.RootStore.clearUserInfo();
            // 极光退出
            JMessage.logout();

            Toast.smile('退出成功', 2000);
            setTimeout(() => {
                this.props.navigation.navigate('Login')
            }, 2000)
        }
        const opts = [
            { title: '退出', onPress: tmplpgout }
        ]
        ActionSheet.show(opts, { title: '取消' })
    }

    render() {
        const user = this.props.UserStore.user
        return (
            <View>
                <THNav title="通用设置" />
                <View>
                    <ListItem
                        title="设置陌生人问题"
                        titleStyle={{ color: '#666' }}
                        chevron
                        bottomDivider
                    />
                    <ListItem
                        title="通知设置"
                        titleStyle={{ color: '#666' }}
                        chevron
                        bottomDivider
                    />
                    <ListItem
                        title="黑名单"
                        titleStyle={{ color: '#666' }}
                        chevron
                        bottomDivider
                    />
                    <ListItem
                        title="修改手机号"
                        titleStyle={{ color: '#666' }}
                        chevron
                        bottomDivider
                        rightTitle={user.mobile}
                    />
                </View>

                <View
                    style={{ marginTop: pxToDp(30) }}
                >
                    <TouchableOpacity
                        onPress={this.logout}
                        style={{ width: '80%', height: pxToDp(40), borderRadius: pxToDp(20), backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', alignSelf: 'center' }}
                    >
                        <Text style={{ color: 'red', fontSize: pxToDp(16) }}>退出登录</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
export default Index;